<template>
  <div>
    <checked-title title="本年度案件类型Top10 (类型)" />
    <div id="mentoubaoshen-zhenggai" style="height: 460px;margin-left -15px;" ref="zhenggaiRef"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getNianDuPaiHangList } from "@/api";

const IconPaiHang = require("@/assets/images/mentoubaoshen/icon-paihang.png");

export default {
  props: {
    id: {
      type: String,
      required: true,
      default: () => {
        return "1298860772859965441";
      },
    },
  },
  data() {
    return {
      iconPaiHang: IconPaiHang,
      chartMTZG: null,
    };
  },
  mounted() {
    this.getNianDuPaiHangList()
  },
  watch: {
    id(value) {
      this.desHander();
      this.getNianDuPaiHangList()
    },
    immediate: true,
  },
  destroy() {
    this.desHander();
  },
  methods: {
    desHander() {
      let myChart = echarts.init(this.$refs.zhenggaiRef);
      myChart.dispose();
    },
    initList() {
      setTimeout(() => {
        this.initChart(this.id);
      });
    },

    getNianDuPaiHangList() {
      getNianDuPaiHangList({ streetId: this.id || '1286564239652724737' }).then(res => {
        this.initChart(res.data)
      })
    },

    initChart(dataList) {
      // 获取排行榜列表
      let echartjyzaj = echarts.init(this.$refs.zhenggaiRef);
      let yData = [],
        data = [];
      let resData = dataList;
      for (let i = 0; i < resData.length; i++) {
        yData.push(resData[i].type);

        data.push(resData[i].count);
      }
      data.sort((a, b) => b - a);

      let option = {
        xAxis: {
          show: false,
          type: "value",
          //控制X轴最大的长度
          max: function (value) {
            return value.max + 120;
          },
          label: { show: false },
        },
        grid: {
          right: "8%",
          left: "8%",
          top: "3%",
          bottom: "1%",
          containLabel: true,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            offset: 5,
            // data:['一','二','三','4','5'],
            data: yData,
            // max: 9,
            //文字配置项
            axisLabel: {
              show: true,
              align: "right",
              margin: 10,
              textStyle: {
                color: "#fff",
                fontSize: "15",
              },
              formatter: function (value) {
                let ret = "";
                let max = 12;
                let val = value.length;
                let rowN = Math.ceil(val / max);
                if (rowN > 1) {
                  for (let i = 0; i < rowN; i++) {
                    let temp = "";
                    let start = i * max;
                    let end = start + max;
                    temp = value.substring(start, end) + "\n";
                    ret += temp;
                  }

                  if (ret.length > 8) {
                    ret = ret.substring(0, 10) + "...";
                  }

                  return ret;
                } else {
                  return value;
                }
              },
              rich: {
                //文字配置项
                title: {
                  align: "right",
                  fontSize: 14,
                  verticalAlign: "bottom",
                  color: "#ffffff",
                  padding: [0, 0, 0, -15],
                },
              },

            },

            //分割线
            splitLine: {
              show: false,
            },
            //Y轴刻度线
            axisTick: {
              show: false,
            },
            //Y轴刻度线
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            realtimeSort: true,
            type: "bar",
            zlevel: 1,
            label: {
              show: true,
              position: "right",
              color: "rgb(40,227,242)",
              valueAnimation: true,
            },
            // 柱体配置项
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(11, 43, 85)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(10, 57, 80)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(10, 71, 49)", // 100% 处的颜色
                    },
                  ],
                  false
                ),

                borderWidth: 1,
                borderColor: "rgba(2,186,145,0.5 )",
              },
              shadowColor: this.colorList,
              shadowOffsetX: 20,
              shadowBlur: 10,
            },

            barWidth: 15,
            data: data,

          },
        ],
      };
      echartjyzaj.setOption(option);
    },
    // }
  },
};
</script>
